<template>
  <!-- 导航栏容器 -->
  <view class="custom-navbar">
    <!-- 左侧返回按钮 -->
    <view class="left" @click="handleBack">
      <image src="/static/commonImg/back.png" class="icon" />
    </view>
    
    <!-- 中间标题 -->
    <view class="title">{{ title }}</view>
    
    <!-- 右侧操作区（图标+文字） -->
    <view class="right" @click="handleAction">
		<!-- <template v-if="isRight==true">
			<text >筛选</text>
			<image src="/static/commonImg/saixunbai.png" class="icon icon-left" />
		</template> -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String ,// 支持动态标题
  },
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 44
    };
  },
  mounted() {
    // 从全局获取高度
    const app = getApp();
    this.statusBarHeight = app.globalData.statusBarHeight;
    this.navBarHeight = app.globalData.navBarHeight;
  },
  methods: {
    handleBack() {
      const pages = getCurrentPages();
        if (pages.length > 1) {
          uni.navigateBack();
        } else {
          // 如果没有页面可返回，则跳转到首页或其他指定页面
          // uni.reLaunch({
          //   url: '/pages/index/index'
          // });
          // 或者使用重定向
          uni.switchTab({
            url: '/pages/My/index',
          });
        }
    },
    handleAction() {
      this.$emit('rightBtn');
    }
  }
};
</script>

<style scoped>
.custom-navbar {
  /* position: fixed;
  top: 0;
  left: 0;
  right: 0; */
  height: 44px; /* 导航栏内容高度 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #000000;
  color: #ffffff;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.left, .right {
  padding: 0 15px;
  display: flex;
  align-items: center;
}
.title {
  font-size: 15px;
  /* font-weight: bold; */
}
.icon {
  width: 40rpx;
  height: 40rpx;
}
.icon-left {
  margin-left: 10rpx;
}
</style>